<template>
    <div>
        {{ myvalue }}
        <!-- <input type="text" v-model="myvalue"> -->
        <!-- @input="myvalue=$event.target.value" 是v-model的源码  v-model是:value和@input的语法糖-->
        <input type="text" :value="myvalue" @input="myvalue=$event.target.value">
        <!-- <Field label="用户名" type="text" :value="myvalue" @myevent="handleEvent"></Field> -->

        <Field label="用户名" v-model:aaaa="myvalue"></Field>
        <Field label="用户名" :modelValue="myvalue" @update:modelValue=""></Field>



        <button @click="handleRegister">注册</button>
        <button @click="handleReset">重置</button>
    </div>
</template>
 
<script>
import Field from './Field.vue';
export default {
    data() {
        return {
            myvalue: 'aaa'
        }
    },
    components:{    
        Field
    },
    methods: {
        handleEvent(value){
            this.myvalue = value
        },
        handleRegister(){
            console.log('注册',this.myvalue);
        },
        handleReset(){
            console.log('重置',this.myvalue);
            this.myvalue = '';
        },
    }
}
</script>